<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>HTML/SVG Example</title>
</head>

<body>
  <!-- https://blog.csdn.net/userkang/article/details/84770843 -->
  <svg width="100px" height="200px" style="background:#889cee"  viewbox="0 0 100 200">
    <circle cx="50" cy="50" r="50" fill="#cec"></circle>
  </svg>
  <svg
      viewbox="0 0 50 100"
      width="100px"
      height="200px"
      style="background:#889cee"
    >
      <circle cx="50" cy="50" r="50" fill="#cec"></circle>
</svg>
<svg width="300px" height="200px" style="background:#889cee">
  <line x1="30" y1="30" x2="200" y2="30"
  style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

<svg width="400px" height="200px" style="background:#889cee">
  <rect width="60" height="200" x="30" y="30"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

<svg width="800px" height="800px" id="test" style="background:#889cee">
    <line x1="0" y1="600" x2="600" y2="600"
    style="stroke:rgb(99,99,99);stroke-width:2"/>
    <line x1="0" y1="0" x2="0" y2="600"
    style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

</body>
</html>
<script>
  let data = [120,100,140,160,180,185,190,210,230,245,255,270];
  data.sort((a,b)=>{
    return b - a
  })
  // let svg  = document.getElementById('test');
  // svg.attributes[0].value = '600px';
  // svg.attributes[1].value = '1000px';
  // svg.style.background = '#f3f3f3';
  // console.log(svg.attributes)

  function createChart(option){
    let aWidth = option.aWidth  || 1000;//k宽
    let aHeight = option.aHeight || 1000;//高
    let zWidth = option.zWidth || 600;//坐标宽
    let zHeight = option.zHeight || 600;//坐标高
    let zhuColor = option.zhuColor || '#4cabce';//柱的颜色
    let jianju  = option.jianju || 30;//横坐标间距
    let shuju = option.data;//数据
    shuju.sort((a,b)=>{
        return b - a
     })
    let maxY = shuju[0];
    let bilv = zHeight/maxY;
    for(let i=0;i<shuju.length;i++){
      
    }





  }
</script>